<style>
	/*filter-popup*/
	.filter-popup { padding-top: 176rpx; color: #333; background-color: #fff; border-radius: 20rpx; position: relative; overflow: hidden; }
	.filter-popup_store { padding: 0 10rpx 20rpx; height: 600rpx; overflow: hidden; overflow-y: auto; }
	.filter-popup_store .cell { display: inline-block; float: left; width: 50%; }
	.filter-popup_store .wbox { margin: 10rpx; padding: 0 10rpx; height: 76rpx; line-height: 76rpx; background-color: #f8f8f8; border: 1rpx solid #f8f8f8; border-radius: 8rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
	.filter-popup_store .current .wbox { background-color: rgba(170, 128, 80, 0.10); border-color: #aa8050; }

	/*filter-popup_screen*/
	.filter-popup_screen { padding: 0 20rpx 20rpx; overflow: hidden; }
	.filter-popup_screen .titles { height: 76rpx; line-height: 76rpx; color: #999; }
	.filter-popup_screen .cells { }
	.filter-popup_screen .cell { display: inline-block; margin: 0 20rpx 20rpx 0; padding: 0 30rpx; height: 76rpx; line-height: 76rpx; background-color: #f8f8f8; border: 1rpx solid #f8f8f8; border-radius: 8rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
	.filter-popup_screen .current { background-color: rgba(170, 128, 80, 0.10); border-color: #aa8050; }

	/*filter-popup_btns*/
	.filter-popup_btns { height: 96rpx; border-top: 1rpx solid #eee; }
	.filter-popup_btns .cell { line-height: 96rpx; text-align: center; }

	/*technician-list*/
	.technician-list { padding: 0 28rpx; color: #636363; font-size: 24rpx; background-color: #fff; }
	.technician-list .cell { padding: 28rpx 0 48rpx; min-height: 168rpx; border-bottom: 1rpx solid #f5f5f5; position: relative; }
	.technician-list .icon { margin-right: 20rpx; width: 168rpx; height: 168rpx; position: relative; }
	.technician-list .icon ._tips { width: 120rpx; height: 36rpx; line-height: 36rpx; text-align: center; color: #fff; font-size: 22rpx; background: #02BF8D; border-radius: 4rpx; position: absolute; left: 50%; bottom: -14rpx; margin-left: -60rpx; }
	.technician-list .icon .image { border-radius: 50%; overflow: hidden; }
	.technician-list .desc { height: 60rpx; line-height: 60rpx; color: #666; }
	.technician-list .desc ._name { margin-left: 4rpx; height: 44rpx; line-height: 40rpx; }
	.technician-list .desc ._nick { color: #333; font-size: 32rpx; }
	.technician-list .desc ._distance { color: #9E9E9E; }
	.technician-list .desc ._info { margin-top: 6rpx; height: 36rpx; line-height: 36rpx; }
	.technician-list .desc ._tags { height: 60rpx; overflow: hidden; }
	.technician-list .desc ._tag { display: inline-block; margin-right: 12rpx; padding: 0 16rpx; height: 36rpx; line-height: 36rpx; border-radius: 36rpx; background: #f8f8f8; }
	.technician-list .desc ._cert { }
	.technician-list .desc ._orders { margin-left: 16rpx; color: #A9A9A9; }
	.technician-list .desc ._store { margin-top: 6rpx; height: 36rpx; line-height: 36rpx; }
	.technician-list .btn { width: 140rpx; height: 60rpx; line-height: 60rpx; text-align: center; border-radius: 8rpx; position: absolute; right: 0; bottom: 30rpx; }



	.tabs-title1 { height: 88rpx; background-color: #f5f5f5; position: fixed; left: 0; right: 0; z-index: 2; }
	.tabs-title1 .cell { 
		margin: 0 30rpx; 
		height: 88rpx; line-height: 80rpx; 
		text-align: center; font-size: 36rpx; 
		color: #333; 
		font-weight: 700; 
		position: relative; 
	}
	.tabs-title1 .current { color: #fff; }
	.tabs-title1 .current::after { 
		content: ""; 
		width: 60rpx; height: 6rpx; 
		border-radius: 4rpx; 
		position: absolute; 
		bottom: 10rpx; left: 50%; 
		margin-left: -30rpx; 
		background: linear-gradient(to right, #fff, #fff); 
	}
	.tabs-title1h { width: 100%; height: 88rpx; }
</style>

<template>
	<view>
		<view class="status-bar_fixed"></view>
		<view class="status-bar_fixedh"></view>

		<view class="tabs-title1" style="background: #fff linear-gradient(90deg, #d7b075, #aa8050); padding: 0 200rpx;" >
			<view class="flex2">
				<view class="flex-1 cell" :class="{'current':tabIndex == 1}">按摩</view>
			</view>
		</view>
		<view class="tabs-title1h"></view>

		<view class="flex2 tabs-filter1" style="z-index: 100;">
			<view class="flex-1 cell" @click="filterPopup('filterOrder')">{{formValue.orderTitle?formValue.orderTitle:'综合排序'}}</view>
			<view class="flex-1 cell" @click="filterPopup('filterStore')">服务商 <text v-if="Object.keys(storeSelected).length" style="margin-left: 4rpx; color: #999; font-size: 22rpx;">({{Object.keys(storeSelected).length}})</text></view>
			<view class="flex-1 cell" @click="filterPopup('filterScreen')">筛选</view>
		</view>
		<view class="tabs-title1h"></view>

		<uni-notice-bar v-if="!formValue.latitude && !formValue.longitude" show-icon text="未开启手机GPS定位，无法计算你与技师的距离" />

		<template v-if="!listItems.length">
			<view class="empty">
				<image class="image" src="/static/image/empty.png"></image>
			</view>
		</template>
		<template v-else>
			<view class="technician-list">
				<block v-for="(list,pindex) in listItems" :key="pindex">
					<block v-for="(item,index) in list" :key="item.id">

						<view class="flex2 cell" @click="goTechnician(item)">
							<view class="flex-0 icon">
								<image class="image" :src="$common.binImage(item.headImg)" mode="aspectFill"></image>
								<view class="_tips">今日可约</view>
							</view>
							<view class="flex-1 desc">
								<view class="flex3 _name">
									<view class="_nick">{{item.nickName}}</view>
									<view class="_distance">
										<uni-icons class="image3" type="location" color="#A9A9A9" size="16"></uni-icons>
										{{$common.distance(item.distance)}}
									</view>
								</view>
								<view v-if="item.personLabel" class="_tags">
									<block v-for="(tag,tindex) in item.personLabel.split(',')" :key="tindex">
										<text class="_tag">{{tag}}</text>
									</block>
								</view>
								<view class="_info">
									<uni-icons class="image3" type="medal" color="#ff961b" size="18"></uni-icons>
									<text class="_cert">资质认证</text>
									<uni-icons type="forward" color="#A9A9A9" size="12"></uni-icons>
									<text class="_orders">最近接单{{item.totalOrder||0}}单</text>
								</view>
								<view class="_store" @click.stop="goStore(item)">
									<uni-icons class="image3" type="shop" color="#A9A9A9" size="18"></uni-icons>
									{{item.storeName}}
									<uni-icons type="forward" color="#A9A9A9" size="12"></uni-icons>
								</view>
							</view>
							<view class="linear btn">立即预约</view>
						</view>

					</block>
				</block>
			</view>
		</template>

		<!-- 综合排序 -->
		<uni-popup v-show="filterType == 'filterOrder'" ref="filterOrder" type="top">
			<view class="filter-popup">
				<view class="field-list" style="margin-top: 0;">
					<block v-for="(item,index) in filterOrder" :key="index">
						<view class="cell" @click="filterOrderSet(item)">
							<view class="_lable">{{item.lable}}</view>
						</view>
					</block>
				</view>
			</view>
		</uni-popup>

		<!-- 服务商 -->
		<uni-popup v-show="filterType == 'filterStore'" ref="filterStore" type="top">
			<view class="filter-popup">
				<view class="filter-popup_store">
					<block v-for="(item,index) in storeItems" :key="index">
						<view class="cell" :class="item.selected?'current':''" @click="filterStoreSet(item)">
							<view class="wbox">
								<uni-icons class="image3" type="shop" color="#ccc" size="18"></uni-icons>
								{{item.storeName}}
							</view>
						</view>
					</block>
					<view class="clear"></view>
				</view>
				<view class="filter-popup_btns">
					<view class="flex2 cells">
						<view class="flex-1 cell" @click="filterStoreReset">重置</view>
						<view class="flex-1 linear cell" @click="filterStoreConfirm">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 筛选 -->
		<uni-popup v-show="filterType == 'filterScreen'" ref="filterScreen" type="right">
			<view class="filter-popup" style="width: 600rpx; height: 100%;">
				<view class="filter-popup_screen">
					<block v-for="list in filterScreen" :key="list.title">
						<view class="titles">{{list.title}}</view>
						<view class="cells">
							<block v-for="(item,index) in list.list" :key="index">
								<view class="cell" :class="{'current':(list.multiple && item.value)||(!list.multiple && list.value === item.value)}" @click="filterScreenSet(list,item)">
									<view class="wbox">{{item.lable}}</view>
								</view>
							</block>
						</view>
					</block>
				</view>
				<view class="filter-popup_btns">
					<view class="flex2 cells">
						<view class="flex-1 cell" @click="filterScreenReset">重置</view>
						<view class="flex-1 linear cell" @click="filterScreenConfirm">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		listRequest,
	} from "@/api/technician"
	import {
		listRequest as storeListRequest,
	} from "@/api/store"

	export default {
		data() {
			return {
				tabIndex: 1,

				formValue: {},
				listItems: [],

				storeItems: [],
				storeSelected: {},

				filterType: '',
				filterOrder: [{
					lable: '综合排序',
					field: '',
					value: ''
				}, {
					lable: '订单最多',
					field: 't.total_order desc, t.id',
					value: 'desc'
				}, {
					lable: '距离最近',
					field: 't.distance, t.id',
					value: 'desc'
				}, {
					lable: '最近加入',
					field: 't.create_time desc, t.id',
					value: 'desc'
				}, {
					lable: '评分最高',
					field: 't.score desc, t.id',
					value: 'desc'
				}, ],
				filterScreenObj: {
					s1: {
						title: '特色标签',
						multiple: true,
						list: [{
								lable: '必点专区',
								field: 'mustStatus',
								value: false,
							},
							{
								lable: '靠谱专区',
								field: 'reliableStatus',
								value: false,
							}
						]
					},
					s2: {
						title: '资质认证',
						multiple: true,
						list: [{
								lable: '头像认证',
								field: 'isHeadAuth',
								value: false,
							},
							{
								lable: '实名认证',
								field: 'isAuth',
								value: false,
							}
						]
					},
					s3: {
						title: '性别',
						multiple: false,
						field: 'sex',
						value: '',
						list: [{
								lable: '男性技师',
								value: 1,
							},
							{
								lable: '女性技师',
								value: 0,
							}
						]
					},
				},
				filterScreen: [],
			}
		},
		onLoad(options) {
			this.initData()
			this.getList()
			this.getStores()

			this.filterScreen = JSON.parse(JSON.stringify(this.filterScreenObj))
		},
		onShow() {
			uni.setTabBarStyle({
				"backgroundColor": "#ffffff",
				"color": "#B8B8B8",
				"selectedColor": "#aa8050",
			})
		},
		methods: {
			onTab(tabIndex) {
				this.tabIndex = tabIndex

				this.initData()
				this.getList()
			},
			initData() {
				let {
					location
				} = this.$mStore.state
				this.formValue = {
					pageNum: 1,
					pageSize: 10,
					status: 1,
					accountType: 1,
					latitude: location.latitude,
					longitude: location.longitude,
					jobTitle: '按摩',
				}
			},
			getList() {
				listRequest(this.formValue).then(res => {
					if (this.formValue.pageNum == 1) {
						this.listItems = []
					}

					if (res && res.rows && res.rows.length) {
						this.$set(this.listItems, this.formValue.pageNum - 1, res.rows)
						this.formValue.pageNum++
					}
				})
			},
			getStores() {
				storeListRequest({
					pageNum: 1,
					pageSize: 100,
					accountType: 2,
					status: 1,
				}).then(res => {
					if (res && res.rows && res.rows.length) {
						this.storeItems = res.rows
					}
				})
			},
			goTechnician(item) {
				uni.navigateTo({
					url: '/pages/technicianDetail/technicianDetail?id=' + item.id
				})
			},
			goStore(item) {
				uni.navigateTo({
					url: '/pages/storeDetail/storeDetail?id=' + item.storeId
				})
			},
			filterPopup(type) {
				if (this.filterType == type) {
					this.$refs[this.filterType].close()
					this.filterType = ''
				} else {
					this.filterType = type
					this.$refs[this.filterType].open()
				}
			},
			filterOrderSet(item) {
				this.formValue.pageNum = 1
				this.$set(this.formValue, 'orderTitle', item.lable)
				this.$set(this.formValue, 'orderByColumn', item.field)
				this.$set(this.formValue, 'isAsc', item.value)

				this.getList()
				this.$refs[this.filterType].close()
				this.filterType = ''
			},
			filterStoreSet(item) {
				this.$set(item, 'selected', !item.selected)

				if (this.storeSelected['store' + item.accountId]) {
					delete this.storeSelected['store' + item.accountId]
				} else {
					this.storeSelected['store' + item.accountId] = item
				}
			},
			filterStoreReset() {
				this.storeSelected = {}
				this.formValue.pageNum = 1
				this.$set(this.formValue, 'storeIds', '')

				this.filterStoreConfirm()
				this.getStores()
			},
			filterStoreConfirm() {
				let storeIds = []
				for (let key in this.storeSelected) {
					storeIds.push(this.storeSelected[key].accountId)
				}

				this.formValue.pageNum = 1
				this.$set(this.formValue, 'storeIds', storeIds.join(','))

				this.getList()
				this.$refs[this.filterType].close()
				this.filterType = ''
			},
			filterScreenSet(list, item) {
				if (list.multiple) {
					item.value = !item.value
				} else {
					list.value = list.value === item.value ? '' : item.value
				}
			},
			filterScreenReset() {
				this.filterScreen = JSON.parse(JSON.stringify(this.filterScreenObj))
				this.filterScreenConfirm()
			},
			filterScreenConfirm() {
				for (let key in this.filterScreen) {
					let obj = this.filterScreen[key]
					obj.list.forEach(item => {
						if (obj.multiple) {
							this.$set(this.formValue, item.field, item.value ? item.value : '')
						} else {
							this.$set(this.formValue, obj.field, obj.value)
						}
					})
				}

				this.formValue.pageNum = 1
				this.getList()
				this.$refs[this.filterType].close()
				this.filterType = ''
			},
		},
		onPullDownRefresh() {
			this.formValue.pageNum = 1
			this.getList()

			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			let length = this.listItems.length
			if (this.listItems[length - 1].length >= this.formValue.pageSize) {
				this.getList()
			}
		},
	}
</script>
